<template>
  <div id="char2" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script>
import commonDataMixin from '@/mixins/commonDataMixin'

export default {
  mixins: [commonDataMixin],
  data() {
    return {
        worddata: []
    };
  },
  watch: { 
    wordCloud() { 
      // console.log(this.wordCloud.worddata)
      if(this.wordCloud) { 
        this.worddata = this.wordCloud.worddata
      }
      this.initCharts() //调用定义词云图方法
    }
  },
  mounted(){
  
  },
  methods: {
    initCharts() {
      let myChart2 = this.$echarts.init(document.getElementById("char2"));

      myChart2.setOption({
        title: {
            
        },
        backgroundColor: "white",
        tooltip: {},

        series: [
          {
            type: "wordCloud",
            //用来调整词之间的距离
            gridSize: 10,
            //用来调整字的大小范围

            sizeRange: [14, 60],
            //用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
            // rotationRange: [-45, 0, 45, 90],
            // rotationRange: [ 0,90],
            rotationRange: [0, 0],
            //随机生成字体颜色
            textStyle: {
              normal: {
                color: function () {
                  return (
                    "rgb(" +
                    Math.round(Math.random() * 255) +
                    ", " +
                    Math.round(Math.random() * 255) +
                    ", " +
                    Math.round(Math.random() * 255) +
                    ")"
                  );
                },
              },
            },
            //位置相关设置
            left: "center",
            top: "center",
            right: null,
            bottom: null,
            width: "200%",
            height: "200%",
            //数据
            data: this.worddata,
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
